<template>
  <div class="page">
    <navigation>{{ orderSide === 2 ? '买' : '卖' }}</navigation>
    <div>
      <div class="user">
        <img :src="data.head_portrait" alt="" class="user-avatar" />
        <span class="user-name">{{ data.nickname }}</span>
      </div>
      <div class="info">
        <div class="info-price">
          <span class="price-label">单价</span>
          <span class="price-value">¥ {{ data.price_usd }}</span>
        </div>
        <div class="info-restriction">限额 <span><img :src="moneyIcon" class="icon-coin" /></span> {{ data.min_num }}-{{ data.max_num }}</div>
      </div>
      <div class="trade">
        <div class="trade-item amount">
          <span class="amount-icon"><img :src="moneyIcon" alt="" class="icon-coin" /></span>
          <input v-model="amount" class="amount-num" placeholder="0.00"/>
        </div>
        <div class="trade-item equal">=</div>
        <div class="trade-item money">
          <span class="money-symbol">¥</span>
          <span class="money-num">{{ totalPrice }}</span>
        </div>
      </div>
      <div v-if="data.note" class="note">
        注意：{{ data.note }}
      </div>
      <div class="payment">
        <div class="payment-title">支持收款方式</div>
        <div class="payment-list">
          <div v-if="data.wechat_enable === '1'" class="payment-item">
            <img src="@/assets/images/weixin.png"/>
            微信
          </div>
          <div v-if="data.alipay_enable === '1'" class="payment-item">
            <img src="@/assets/images/zhifubao.png"/>
            支付宝
          </div>
          <div v-if="data.card_enable === '1'" class="payment-item">
            <img src="@/assets/images/xinyongka.png"/>
            银行卡
          </div>
        </div>
      </div>
      <div class="total"><span class="total-label">总计 </span>¥ {{ totalPrice }}</div>
      <div v-if="data.uid !== user.id" class="order">
        <div class="btn-order" @click="handleSubmit">下订单</div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions } from 'vuex'
import { format } from '@/utils/number'
import navigation from '@/components/Navigation'
export default {
  components: { navigation },
  data () {
    return {
      loading: false,
      mid: this.$route.query.mid,
      data: {},
      amount: 0
    }
  },
  computed: {
    ...mapState({
      user: ({ auth }) => auth.user
    }),
    ...mapGetters({
      getMoneyInfo: 'otc/getMoneyInfo'
    }),
    moneyIcon () {
      const moneyInfo = this.getMoneyInfo(this.data.coin_name)
      if (moneyInfo) {
        return moneyInfo.icon
      }
      return ''
    },
    orderSide () {
      if (this.data.side === '2') {
        return 1
      }
      return 2
    },
    totalPrice () {
      const totalPrice = this.amount * this.data.price_usd
      return isNaN(totalPrice) ? 0 : format(totalPrice)
    }
  },
  beforeMount () {
    this.getMarketDetail({ market_id: this.mid })
      .then(data => (this.data = data))
  },
  methods: {
    ...mapActions({
      getMarketDetail: 'otc/getMarketDetail',
      createOrder: 'otc/createOrder'
    }),
    handleSubmit () {
      if (this.loading) { return }
      if (!(Number.parseFloat(this.amount) >= this.data.min_num && Number.parseFloat(this.amount) <= this.data.max_num)) {
        this.$toast.error('请确认数量范围')
        return
      }
      const payload = {
        side: this.orderSide,
        market_id: this.mid,
        amount: this.amount,
        coin_name: this.data.coin_name,
        uid2: this.data.uid
      }
      const succeed = () => {
        this.$toast.success('下单成功')
        this.$router.replace('/otc/order-status')
      }
      const failed = (error) => {
        this.$toast.error(error.message)
      }
      this.loading = true
      this.createOrder(payload)
        .then(succeed)
        .catch(failed)
        .finally(() => (this.loading = false))
    }
  }
}
</script>
<style scoped>
.user {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 140px;
}
.user-avatar {
  width: 60px;
  height: 60px;
  border-radius: 60px;
}
.user-name {
  margin-top: 6px;
}

.icon-coin {
  width: 14px;
  height: 14px;
  border-radius: 14px;
}

.info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.info-price {
  margin-bottom: 10px;
}
.price-label {
  font-size: 12px;
  margin-left: 4px;
}
.price-value {
  font-size: 16px;
}
.info-restriction {
  font-size: 12px;
  margin-bottom: 6px;
}

.trade {
  margin-left: 10px;
  margin-right: 10px;
  display: flex;
  height: 50px;
}
.trade-item {
}
.trade-item.amount {
  width: 42%;
  background-color: #eee;
  display: flex;
  align-items: center;
}
.amount-icon {
  width: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left:3px;
}
.amount-num {
  flex: 1;
  font-size: 16px;
  background-color: transparent;
  padding-left: 2px;
  width: 100%;
}
.trade-item.equal {
  width: 16%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.trade-item.money {
  width: 42%;
  background-color: #eee;
  display: flex;
  align-items: center;
}
.money-symbol {
  width: 18px;
  text-align: center;
  font-size: 14px;
}
.money-num {
  flex: 1;
  font-size: 16px;
}

.note {
  padding: 8px 10px 0px;
  color: #b57618;
}
.payment {
  padding: 10px;
  margin-top: 20px;
}
.payment-title {
  font-size: 12px;
  margin-bottom: 10px;
}
.payment-list {
  display: flex;
}
.payment-item {
  font-size: 14px;
  margin-right: 6px;
}
.payment-item img {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  vertical-align: middle;
}

.total {
  text-align: right;
  padding: 10px;
  font-size: 18px;
}
.total-label {
  font-size: 14px;
}
.order {
  margin-top: 6px;
}
.btn-order {
  width: 80%;
  height: 44px;
  line-height: 44px;
  background-color: #1a85d7;
  color: white;
  border-radius: 4px;
  text-align: center;
  font-size: 18px;
  margin-left: auto;
  margin-right: auto;
}
</style>
